<!DOCTYPE html>
<html>

<head>
  <title>王航的简历</title>
  <link rel="stylesheet" href="loading.css">
  <link rel="stylesheet" href="./print.css" media="print">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css">
  <link rel="stylesheet" href="./style.css">
  <script src="//at.alicdn.com/t/font_601955_0und87zok42qehfr.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>
</head>

<body>
<div id="sitewelcome" class="sitewelcome active">
  <div class="loading"></div>
</div>
<div id="TopNavBar" class="TopNavBar">
  <div class="TopNavBar-ine clearfix">
    <a class="logo" href="#" alt="logo">
      <span class="rs">RS</span>
      <span class="card">card</span>
    </a>
    <nav class="clearfix menu" style="float:right">
      <ul class="clearfix">
        <li>
          <a href="#siteAbout">关于</a>
        </li>
        <li class="menuTigger">
          <a href="#siteKills">技能</a>
          <ul class="sebmenu">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>AJax</li>
            <li>VUE</li>
            <li>VUE</li>
          </ul>
        </li>
        <li class="menuTigger">
          <a href="#siteWorks">作品</a>
          <ul class="sebmenu">
            <li>作品</li>
            <li>框架</li>
            <li>原生JS</li>
          </ul>
        </li>
        <li id="blog">
          <a href="https://from-wh.github.io/" target="_blank">博客</a>
        </li>
        <li>
          <a href="#">日历</a>
        </li>
        <li>
          <a href="#">联系方式</a>
        </li>
        <li>
          <a href="#">其他 </a>
        </li>
      </ul>
    </nav>
  </div>

</div>
<div class="banner">
  <div class="yinying"></div>
</div>
<main>
  <div data-x id="siteAbout" class="big">
    <div class="usercard clearfix">
      <div class="picture">
        <img src="./img/WDZP.jpg" alt="头像">
      </div>
      <div class="profile clearfix">
                    <span class="welcome">Hello
                        <span class="triangle"></span>
                    </span>
        <h1>王航</h1>
        <p>我是一个前端开发工程师</p>
        <hr>
        <dl>
          <dt>年龄</dt>
          <dd>25</dd>
          <dt>城市</dt>
          <dd>西安</dd>
          <dt>邮箱</dt>
          <dd>845885502@qq.com</dd>
          <dt>手机</dt>
          <dd>12356446548</dd>
        </dl>
      </div>
    </div>
    <footer class="media">
      <a href="https://github.com/From-WH" target="_blank">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-github"></use>
          media="print"
        </svg>
      </a>
      <a href="https://weibo.com/3867389818/profile?topnav=1&wvr=6" target="_blank">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-weibo"></use>
        </svg>
      </a>
      <a href="#">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-weixin"></use>
        </svg>
      </a>
    </footer>
  </div>
  <p style="text-align:center">
    <a href="#" class="buttom" target="_blank" download>下载简历</a>
  </p>
  <p class="introduction">王航，Web前端工程师，拥有丰富的网页开发经验，能够独立完成网页及后台交互工作，
    <br>技能：html制作，熟练使用CSS、js，熟悉Vue框架</p>
</main>
<section data-x id="siteKills" class="skill">
  <h2>技能</h2>
  <ol class="clearfix">
    <li>
      <h3>
        html
      </h3>
      <div class="progressbar">
        <div class="progress" style="width:80%"></div>
      </div>
    </li>
    <li>
      <h3>CSS</h3>
      <div class="progressbar">
        <div class="progress" style="width:65%"></div>
      </div>
    </li>
    <li>
      <h3>Ajax</h3>
      <div class="progressbar">
        <div class="progress" style="width:45%"></div>
      </div>
      <div class="bar"></div>
    </li>
    <li>
      <h3>js</h3>
      <div class="progressbar">
        <div class="progress" style="width:70%"></div>
      </div>
      <div class="bar"></div>
    </li>
    <li>
      <h3>vue</h3>
      <div class="progressbar">
        <div class="progress"></div>
      </div>
      <div class="bar"></div>
    </li>
    <li>
      <h3>html</h3>
      <div class="progressbar">
        <div class="progress"></div>
      </div>
      <div class="bar"></div>
    </li>
  </ol>
</section>
<section data-x id="siteWorks" class="portfolio">
  <h2>作品集</h2>
  <div id="mySlides">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <img class="swiper-slide" src="./img/canvas.jpg">
        <img class="swiper-slide" src="./img/nav.jpg">
        <img class="swiper-slide" src="./img/slides.png">
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</section>
<section class="message">
  <h3 class="h3">留言板</h3>
  <ol id="messageList">
  </ol>
  <form id="postMessageForm" class="postMessage clearfix">
    <label for="">昵称：</label>
    <input class="input1" type="text" name="name" placeholder="请输入昵称" autocomplete="off"></br>
    <label class="labelTwo" for="">内容：</label>
    <textarea class="input2" cols="60" rows="4" name="content" placeholder="请输入内容" autocomplete="off"></textarea>
    <input class="input3" type="submit" value="提交">
  </form>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<script src="//cdn1.lncld.net/static/js/3.6.8/av-min.js"></script>
<script src="./js/View.js"></script>
<script src="./js/Model.js"></script>
<script src="./js/controller.js"></script>
<!-- 模块化 -->
<script src="./js/loading.js"></script>
<script src="./js/init-swiper.js"></script>
<script src="./js/auto-slides-up.js"></script>
<script src="./js/stick-topbar.js"></script>
<script src="./js/smoothly-navigtion.js"></script>
<script src="./js/messages.js"></script>
<script src="./js/print.js"></script>
</body>

</html>